<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2633224_qfzsqy5gu8.css"/>
    <style>
        * {padding: 0;margin: 0;}

        ul,li{ list-style: none; }

        a{ text-decoration: none; }

        .icon{color: black;}

        .icon-youjiantou{color: #b37e7e; }

        .icon-sousuo{ font-size: 28px; color: rgb(247, 84, 84);}

        #app{ font-size: 12px;}

        .list{ margin-top: 20px;}
/* 头部 */
        .myheader {
            width: 100%; height: 150px;
            position: fixed;
            background: #fff;
            top: 0; left: 0; right: 0;
            border-bottom: 1px solid rgb(241, 234, 234);
        }
       
        .myheader .mo{
            width: 100%; height: 50px;
            background-color: indianred;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
        .myheader .moimg{width: 94px; height: 39px;}

        .myheader_a {
            height: 60px; line-height: 60px;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        .myheader_a .faxian{ font-size:14px; color: #666666; font-weight: 620; }

        .myheader_a .app{font-size: 16px; color: #b37e7e; font-weight: 700; }

        .myheader_a .moimg{ margin: 10px;}
        
        .myheader_b{
            display: flex;
            justify-content: space-around;
            height: 40px; line-height: 40px;
            font-size: 15px; color: #666666;
            font-weight: 700;
        }
       
/* 头部孙子 */
        .item{
            width: 100%;
            display: flex;
            margin-bottom: 15px;
            justify-content: space-around;
        }
        .item .item_img{ width: 20%;}

        .item .item_img img{width: 100%;}
        
        .item .item_text{width: 50%;}
      
        .item_text div{margin-bottom: 10px; font-size: 13px;}

        .item_text .nm{font-size: 14px; color: #333333; font-weight: 700;}
        
        .item_text .sc{
            font-size: 15px; color: #faaf00;
            font-weight: 700;
            margin-left: 5px;
        }
        .item .item_btn{
            width: 20%;
            display: flex;
            align-content: center;
        }
        .item .item_btn .btn{
            width: 47px; height: 27px;
            color: #fff;
            border-radius: 5px;
            line-height: 27px;
            text-align: center;
        }
        .item .item_btn .gpbtn{background:  #f03d37;}

        .item .item_btn .ysbtn{background: #3c9fe6;}
        
/* 中部 */
        .con {
            width: 100%;
            margin-top: 150px;
            margin-bottom: 50px;
            font-size: 14px;
        }
        .con .haoping{ margin-left: 7px;}

        .con ul li {
            height: 100px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
/* 底部 */
        .myfooter{
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0; 
            border-top: 1px solid rgb(240, 233, 233);
            background: #fff;
            line-height: 20px;
            text-align: center;
        }
        .footer{
            display: flex;
            justify-content: space-around;
            height: 25px;
            line-height: 25px;
        }
        .footer span{
            width: 54px;
        }
        .footer_a{
            display: flex;
            justify-content: space-around; 
            height: 25px;
            line-height: 25px; 
        }
        .footer_a span{
            width: 54px;
           
        }
    </style>
</head>

<body>
    
    <div id="app">
        <myheader></myheader>
        <mycon :list="lista"></mycon>
        <myfooter></myfooter>
    </div>

    <script>
        /*孙子组件*/
        var myitem = {
            props: ["item"],
            template: `
                    <ul class="list">
                        <li class="item">
                            <div class="item_img"><img :src="item.img"/></div>
                            <div class="item_text">
                                <div class="nm">{{item.nm}}</div>
                                <div>观众评<span class="sc">{{item.sc}}</span></div>
                                <div>主演{{item.star}}</div>
                                <div>{{item.showInfo}}</div>
                            </div>
                            <div class="item_btn">
                                <div v-if="item.prsShow" class="btn ysbtn">预售</div>
                                <div v-else class="btn gpbtn">购票</div>
                            </div>
                        </li>
                    </ul>
                   `
        }

        /*********子组件*****************/
        /*子组件*/
        //头部
        var myheader = {
            template: `<div class="myheader">
                            <div class="mo">猫眼电影</div>
                            <div class="myheader_a">
                                <img class="moimg" src="//p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png">
                                <div class="faxian">发现最新最热电影</div>
                                <div>
                                    <a href="#" class="app">打开APP</a>
                                    <span class="iconfont icon-youjiantou"></span>
                                </div>
                            </div>
                            <hr/>
                            <div class="myheader_b">
                                <span>深圳</span>
                                <span>热映</span>
                                <span>影院</span>
                                <span>待映</span>
                                <span>经典电影</span>
                                <span class="iconfont icon-sousuo"></span>
                            </div>
                      </div>`
        }
        //中部
        var mycon = {
            props: ['list'],
            mounted() {
                //console.log(this.list);
                this.$nextTick(() => {
                    console.log(this.list);
                })
            },
            components: { myitem },
            template: `<div class="con">
                            <div class="haoping">最受好评电影</div>
                            <ul>
                                <myitem v-for="item in list" :key="item.id" :item="item"></myitem>
                            </ul>    
                       </div>`
        }
        //底部
        var myfooter = {
            template: `<div class="myfooter">
                            <div class="footer">
                                <span class="iconfont icon-dianying"></span>
                                <span class="iconfont icon-shipin1"></span>
                                <span class="iconfont icon-shipin"></span>
                                <span class="iconfont icon-dianyingpiao"></span>
                                <span class="iconfont icon-wode"></span>
                            </div>
                            <div class="footer_a">
                                <span>电影/影院</span>
                                <span>视频</span>
                                <span>小视频</span>
                                <span>演出</span>
                                <span>我的</span>
                            </div>     
                       </div>`
        };
        /**********子组件*************/

        /*********根************/
        var app = new Vue({
            el: "#app",
            data: {
                lista: []
            },
            mounted() {
                axios.get("list.json").then(res => {
                    console.log(res);
                    this.lista = res.data.movieList;
                    this.lista.forEach(item => {
                        item.img = item.img.replace("w.h", "64.90");
                    })
                })
            },
            components: {
                myheader, mycon, myfooter
            }
        })
    </script>
</body>

</html>